<template>
  <img src="../../assets/juxing.png" alt="" class="img-1" />
  <div class="div-1">
    <div class="div-2">速拼</div>
    <input type="search" placeholder="请输入搜索商品" />
  </div>
</template>
<script>
export default {};
</script>

<style lang="less" scoped>
.img-1 {
  width: 100%;
  height: 8rem;
  position: absolute;
  z-index: -1;
}
.div-1 {
  padding: 0 0.7rem;
  .div-2 {
    font-size: 1rem;
    color: rgb(233, 231, 231);
    text-align: center;
    padding: 0.5rem 0 1rem 0;
  }
  input {
    width: 100%;
    height: 1.8rem;
    line-height: 1.8rem;
    border: none;
    border-radius: 1rem;
    box-sizing: border-box;
    padding-left: 2.5rem;
    background: url(../../assets/sousuo.png) no-repeat 0.2rem 0;
    background-size: 2rem;
    background-color: #f5f5f5;
  }
  ::-webkit-input-placeholder {
    color: rgb(128, 128, 128);
    font-size: 0.8rem;
  }
}
</style>